<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../wjdc/easyui/css/icon.css"/>
    <link rel="stylesheet" href="../wjdc/easyui/css/easyui.css"/>
    <script src="../wjdc/easyui/js/jquery.min.js"></script>
    <script src="../wjdc/easyui/js/jquery.easyui.min.js"></script>
    <script src="../wjdc/easyui/js/easyui-lang-zh_CN.js"></script>

    <style>
        table {
            border-collapse: collapse;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }

        td {
            padding: 8px 10px;
            text-align: center;
            font-size: 12px;
        }
    </style>
    <script>
        $.post("getColumnName", {bm: "city_aqi_day"}, function (data) {
            /* alert(JSON.stringify(data))*/
            //这个函数的参数可以是从后台传过来的也可以是从其他任何地方传过来的
            //这里我假设这个data是一个长度为5的字符串数组 我要把他放在表格的一行里面，分成五列
            var tableData = "<tr style='width:300px'>"
            //动态增加5个td,并且把data数组的五个值赋给每个td
            for (var i = 0; i < data.length; i++) {
                tableData += "<td>" + data[i] + "</td>"
            }
            tableData += "</tr>"
            //现在tableData已经生成好了，把他赋值给上面的tbody
            $("#tbody1").html(tableData)
            $.post("findTableData", {bm: "city_aqi_day"}, function (d) {
                //动态增加5个td,并且把data数组的五个值赋给每个td
                for (var i = 0; i < d.length; i++) {
                    var tableData1 = "<tr style='width:300px'>"
                    for (var j = 0; j < data.length; j++) {
                        var s = data[j].toString()
                        tableData1 += "<td>" + d[i][s] + "</td>"
                    }
                    tableData += "</tr>"
                }
                $("#tbody2").html(tableData1)
            });
        });
    </script>

</head>
<body>
<div style="text-align:center"><a>河南城市气象数据</a></div>

<table>
    <tbody id="tbody1">

    </tbody>
    <tr>

    </tr>
    <tbody id="tbody2">

    </tbody>

</table>

</body>
</html>